@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');



:root {

    /*ColorPalette*/

    --ColorWhite: #ffffff;

    --ColorBlack: #626262;



    --ColorPrimary: #1B4965;

    --ColorSecondary: #5FA8D3; 

    --ColorTertiary: #CAE9FF;

    --ColorQuaternary: #62B6CB;

    --ColorQuinary: #BEE9E8;



    --ColorGreen: #0e8694;

    --ColorWhiteGreen: #6fbbc4;

}



/*Desktop-bigger*/

@media only screen and (min-width: 1921px) { 



}



/*Desktop-normal*/

@media only screen and (min-width: 1001px)  {

    /*Banner*/

    .vertical-align {

        

    }



    main .banner {

        width: 100%;

        height: 600px;

        background-image: url("../img/indexBanner.jpg");

        background-repeat: no-repeat;

        background-size: 80%;

        background-position: 50% 00%;

        /*transform: scale(0.8);*/

        display: table;

    }



    main .vertical-align div {

        width: 100%;

        height: fit-content;

        padding-top: 5px;

        padding-bottom: 5px;

        background-color: var( --ColorWhiteGreen);

    }



    main .vertical-align div h1 {

        margin-top: 20px;

        margin-bottom: 20px;

    }



    main .vertical-align div h2 {

        margin-top: 20px;

        margin-bottom: 20px;

    }



    main section h1 {

        font-size: 38px;

        font-weight: 600;

        color: var(--ColorWhite);

        text-align: center;

        text-shadow: 1px 1px 3px var(--ColorBlack);

        line-height: 40px;

        margin-top: 30px;

        margin-bottom: 30px;

    }



    main section h2 {

        font-size: 50px;

        font-weight: 900;

        color: var(--ColorWhite);

        text-align: center;

        text-shadow: 1px 1px 3px var(--ColorBlack);

        text-transform: uppercase;

        line-height: 55px;

        margin-top: 30px;

        margin-bottom: 30px;

    }



    section h3 {

        font-size: 30px;

        font-weight: 500;

        color: var(--ColorGreen);

        text-shadow: 1px 1px 2px #168784;

        text-transform: uppercase;

        text-align: left;        

        

        margin-left: 20px;

        margin-top: 30px;

        margin-bottom: 30px;

    }



    section h4 {

        font-size: 22px;

        font-weight: 400;

        text-transform: uppercase;

        text-align: left;

        margin-left: 0px;

        margin-top: 30px;

        margin-bottom: 30px;

    }



    /*Class content*/

    .content {

        margin-top: 50px;

        margin-bottom: 30px;

    }



    /*Trattamenti*/

    .igene-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 0% 75%;

        display: table;

        background-image: url("../img/treatment/Igene.jpg");

    }



    .chirurgia-banner{

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/chirurgia.jpg");

    }



    .pedodonzia-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 0% 40%;

        display: table;

        background-image: url("../img/treatment/pedodonzia.jpg");

    }



    .ortodonzia-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/ortodonzia.jpg");

    }



    .conservativa-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 0% 63%;

        display: table;

        background-image: url("../img/treatment/Conservativa.jpg");

    }



    .protesi-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 0% 78%;

        display: table;

        background-image: url("../img/treatment/Protesi.jpg");

    }



    .edodonzia-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 0% 70%;

        display: table;

        background-image: url("../img/treatment/Endodonzia.jpg");

    }



    .parodontologia-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 0% 40%;

        display: table;

        background-image: url("../img/treatment/paradontologia.jpg");

    }



    .implantologia-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/implantologia.jpg");

    }



    .sbiancamento-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/sbiancamento.jpg");

    }



    .faccette-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: bottom;

        display: table;

        background-image: url("../img/treatment/faccette.jpg");

    }



    .materiali-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 0% 40%;

        display: table;

        background-image: url("../img/treatment/materiali.jpg");

    }



    /*Profilo*/

    main .content .profile {

        display: grid;

        gap: 15px;

        grid-template-columns: 1fr 1fr;

        grid-template-rows: .2fr  .2fr .2fr .2fr .2fr .2fr;

        grid-template-areas: 

        "title title"

        "space photo"

        "profileTextOne photo"

        "profileQuote photo"

        "subspace photo"

        "subtitle subtitle"

        "profileTextTwo profileTextTwo";

    }



    .profile .subspace {

        grid-area: subspace;

    }



    .profile .space {

        grid-area: space;

    }



    .profile .profileImg {

        grid-area: photo;

        display: block;

        margin: 0px auto;

        height: 430px;

        width: auto;

        box-shadow:0px 0px 20px 10px rgba(100, 100, 100, 0.3);

    }



    .profile .profileTitle {

        grid-area: title;

    }



    .profile .profileSubTitle {

        grid-area: subtitle;

        /*padding-top: 20px;  */

    }

    

    .profile .profileTextOne {

        grid-area: profileTextOne;

      

        display: block;

        justify-content: center;

        align-items: center;

    }



    .profile .profileQuote {

        grid-area: profileQuote;

    }



    .profile .profileQuote p{

        font-style: oblique;

        text-align: center;

    }



    .profile .profileTextTwo {

        grid-area: profileTextTwo;

    }



    .profileTextTwo ul {

        list-style: square;

    }



    .profileTextTwo ul li {

        /*margin-left: 65px;*/

    }



    .profileTextTwo ul li p{

        margin-left: 0px;

    }



    /*Studio*/

    /*Ambienti*/

    main .photoImg {

        display: block;

        height: 262px;

        width: auto;

        margin: 20px auto;

    }



    main .studio-banner {

        width: 100%;

        height: calc(70vh - 100px);

        background-image: url("../img/Ambienti.JPG");

        background-repeat: no-repeat;

        background-size: cover;

        background-position: 50% 25%;

        display: table;

    }



    /*Gallery Test*/

    .photoGallery {

        display: grid;

        grid-template-columns: 1fr 1fr;

        grid-template-rows: 1fr 1fr 1fr 1fr;

        min-height: 100vh;

        gap: 20px;

    }



    .imageContainer {

        overflow: hidden;

        height: 500px;

    }



    .imageContainer img{

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: all 0.4s ease-out;

        cursor: pointer;

    }



    .imageContainer img:hover{

        transform: scale(1.1);

    }



    .viewer {

        background-color: rgba(0, 0, 0, 0.8 );

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        opacity: 0;

        pointer-events: none;

        transition: 0.25s ease-out;

    }



    .viewer.open {

        opacity: 1;

        pointer-events: all;

    }



    .viewer .viewedImage {

        position: absolute;

        height: 70%;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%) scale(0.5);

        transition: all 0.25s ease-out;

    }



    .viewer .viewedImage.open {

        transform: translate(-50%, -50%) scale(1);

    }



    .viewer .infoImage {

        color: white;



        font-size: 2rem;

        position: absolute;

        bottom: 5%;

        left: 50%;



        transform: translate(-50%, -50%);

    }



    /*Old gallery titles*/

    .gallery div {

        width: 100%;

        height: 100%;

        background-color: var(--ColorBlack);

        opacity: 0;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    .gallery div:hover{

        opacity: 0.7;

        transition: all ease-in-out 0.3s;

    }



    .gallery a {

        font-size: 18px;

        color: var(--ColorWhite);

        text-decoration: none;

        text-transform: uppercase;

    }



    /*PaginaEstetica*/

    main .este {

        margin-left: 50px;

        margin-right: 50px;

        margin-bottom: 60px;

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: 1fr 1fr 1fr 1fr;

        gap: 16px;

        grid-template-areas: 

        "bril"

        "fac"

        "mat"

        "orto"

        "sbian"

        "rec";

    }



    .este a {

        background-size: 100%;

        background-repeat: no-repeat;

        transition: all 0.3s ease-in-out;

    }



    .este a:hover {

        background-size: 110%;       

    }



    .este .esteSbian {

        grid-area: sbian;

        background-image: url("../img/treatment/sbiancamento.jpg");

        background-position: center;

    }



    .este .esteFac {

        grid-area: fac;

        background-image: url("../img/treatment/faccette.jpg");

        background-position: bottom;

    }



    .este .esteMat {

        grid-area: mat;

        background-image: url("../img/treatment/materiali.jpg");

        background-position: center;

    }



    .este .esteBril {

        grid-area: bril;

        background-image: url("../img/treatment/materiali.jpg");

        background-position: center;

    }



    .este .esteOrto {

        grid-area: orto;

        background-image: url("../img/treatment/materiali.jpg");

        background-position: center;

    }



    .este .esteRec {

        grid-area: rec;

        background-image: url("../img/treatment/materiali.jpg");

        background-position: center;

    }



    /*PaginaTrattamenti*/

    main .trat {

        margin-left: 50px;

        margin-right: 50px;

        margin-bottom: 60px;

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

        gap: 16px;

        grid-template-areas: 

        "igene cons cons"

        "prot prot endo"

        "orto para para"

        "chir chir chir"

        "pedo pedo imp";

    }



    .desk-wrapper section p {

        /*

        margin-left: 50px;

        margin-right: 50px;

        */

        margin-bottom: 10px;

        margin-top: 5px;

        line-height: 30px;

    }



    .studio-boxlink-sq {

        height: 160px;

        box-shadow: 1px 1px 7px 1px #c9c9c9;

    }



    .studio-boxlink-sq h3 {

        font-size: 25px;

        font-weight: 700;

        line-height: 160px;

        padding: 0;

        color: var(--ColorWhite);

        text-transform: uppercase;

        text-align: center;

        text-shadow: 2px 2px 8px var(--ColorBlack);

        transition: all 0.1s ease-in-out;

        margin-top: 0;

        margin-bottom: 0;

    }



    .studio-boxlink-sq h3:hover {

        /*font-size: 26px;*/

    }



    .trat a {

        background-size: 100%;

        background-repeat: no-repeat;

        transition: all 0.3s ease-in-out;

    }



    .trat a:hover {

        background-size: 110%;       

    }



    .trat .tratIgene {

        grid-area: igene;

        background-image: url("../img/treatment/Igene.jpg");

        background-size: 100%;

        background-position: center;

    }



    .trat .tratCons {

        grid-area: cons;

        background-image: url("../img/treatment/Conservativa.jpg");

        background-position: center;

    }



    .trat .tratProt {

        grid-area: prot;

        background-image: url("../img/treatment/Protesi.jpg");

        background-position: center;

    }



    .trat .tratEndo {

        grid-area: endo;

        background-image: url("../img/treatment/Endodonzia.jpg");

        background-position: center;

    }



    .trat .tratPara {

        grid-area: para;

        background-image: url("../img/treatment/paradontologia.jpg");

        background-position: center;

    }



    .trat .tratOrto {

        grid-area: orto;

        background-image: url("../img/treatment/ortodonzia.jpg");

        background-position: center;

    }



    .trat .tratPedo {

        grid-area: pedo;

        background-image: url("../img/treatment/pedodonzia.jpg");

        background-position: center;

    }



    .trat .tratChir {

        grid-area: chir;

        background-image: url("../img/treatment/chirurgia.jpg");

        background-position: center;

    }



    .trat .tratImp {

        grid-area: imp;

        background-image: url("../img/treatment/implantologia.jpg");

        background-position: center;

    }



    /*Tecnologie*/

    main .tec{

        margin-left: 50px;

        margin-right: 50px;

        margin-bottom: 60px;

        display: grid;

        grid-template-columns:  1fr;

        grid-template-rows: 1fr 1fr 1fr;

        gap: 16px;

        grid-template-areas: 

        "implantologiaComputer"

        "protesi"

        "scanner";

    }



    .tec .tecImp {

        grid-area: implantologiaComputer;

        background-image: url("../img/treatment/implantologia.jpg");

        background-position: center;

    }

    .tec .tecProt {

        grid-area: protesi;

        background-image: url("../img/treatment/implantologia.jpg");

        background-position: center;

    }

    .tec .tecScan {

        grid-area: scanner;

        background-image: url("../img/treatment/implantologia.jpg");

        background-position: center;

    }



    /*Lists*/

    /*Content list*/

    .wrapper .content ul {

        list-style: square;

        list-style-position: outside;

        

        margin-left: 14px;

        margin-bottom: 30px;

    }



    .wrapper .content ul li p {

        margin-left: 7px;

    }

    .wrapper .content ul li h4 {

        margin-left: 7px;

    }



    /*Contact*/

    /*MAP*/

    .map {

        width: calc(100% - 100px);

        margin-top: 30px;

        margin-left: 50px;

        margin-right: 50px;

    }



    main .content .contacts {

        display: grid;

        gap: 10px;

        grid-template-rows: 1fr;

        grid-template-columns: 1fr 1fr 1fr;

        grid-template-areas: 

        "email phone address";

    }



    main .content .contacts .email {

        grid-area: email;

        gap: 10px;

        display: grid;

        grid-template-columns: 1fr 1fr 1fr 1fr;

        grid-template-rows: 1fr 1fr 1fr;

        grid-template-areas: 

        " . icon icon ."

        " . icon icon ."

        "text text text text ";

    }



    main .content .contacts .phone {

        grid-area: phone;

        gap: 10px;

        display: grid;

        grid-template-columns: 1fr 1fr 1fr 1fr;

        grid-template-rows: 1fr 1fr 1fr;

        grid-template-areas: 

        " . icon icon ."

        " . icon icon ."

        ". text text . ";

    }



    main .content .contacts .address {

        grid-area: address;

        gap: 10px;

        display: grid;

        grid-template-columns: 1fr 1fr 1fr 1fr;

        grid-template-rows: 1fr 1fr 1fr;

        grid-template-areas: 

        " . icon icon ."

        " . icon icon ."

        ". text text . ";

    }



    main .content .contacts div #img {

        grid-area: icon;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    main .content .contacts div img {

        border-radius: 50px;

        height: 50px;

        width: 50px;

        margin: auto;

        background-color: rgba(0,0,0,0);

    }



    main .content .contacts div img:hover {

        box-shadow:0px 0px 20px 10px var(--ColorTertiary);

        transition: all 0.1s ease-in-out;

    }



    main .content .contacts div #text{

        grid-area: text;

        text-align: center;

        text-decoration: none;

        color: var(--ColorBlack);

    }



    main .content .contacts div #text:hover{

        text-shadow: 0 0 4px #d1d1d1;

    }

}



/*Mobile*/



@media only screen and (max-width: 1000px) {



/*MAIN*/



    /*Banner*/

    .vertical-align {

        display: block;

    }



    main .banner {

        width: 100%;

        height: calc(70vh - 100px);

        background-image: url("../img/indexBanner.jpg");

        background-repeat: no-repeat;

        background-size: cover;

        background-position: center;

        display: table;

    }



    main .vertical-align div {

        width: 100%;

        height: 100%;

        padding-top: 8px;

        padding-bottom: 8px;

        background-color: var(--ColorWhiteGreen);

    }



    main section h2 {

       line-height: 100%;

       font-size: 34px;

       font-weight: 900;

       color: var(--ColorWhite);

       text-align: center;

       text-shadow: 1px 1px 3px var(--ColorBlack);

       text-transform: uppercase;

    }   



    main section h1 {

        line-height: 100%;

        font-size: 28px;

        font-weight: 600;

        color: var(--ColorWhite);

        text-align: center;

        text-shadow: 1px 1px 3px var(--ColorBlack);

    }







    .content {

        margin: 10px;

    }







    section h3 {

        line-height: 40px;

        font-size: 30px;

        font-weight: 500;

        color: var(--ColorBlack);



        text-transform: uppercase;

        text-align: center;

        padding: 10px;

    }







    section h4 {

        font-size: 22px;

        font-weight: 400;

        color: var(--ColorBlack);

        text-transform: uppercase;

        text-align: center;

        padding: 5px;

    }







    section p {

        font-size: 15px;

        line-height: 21px;

        word-spacing: 3px;

        letter-spacing: 1px;

        padding: 4px;

        text-align: justify;

    }







    /*useless*/



    main section ul li {

        font-size: 15px;

        line-height: 21px;

        word-spacing: 3px;

        letter-spacing: 1px;

        padding: 2px;

    }







    main section q {

        margin-top: 10px;

        margin-left: 50px;

        margin-bottom: 10px;

        text-align: justify;

        font-size: 15px;

        line-height: 21px;

        word-spacing: 3px;

        letter-spacing: 1px;

        padding: 4px;

        font-style: italic;

    }





/*Profilo*/



    main .content .profile {

        display: grid;

        gap: 10px;

        grid-template-columns: 1fr;

        grid-template-rows: .6fr .2fr .2fr .7fr .2fr 4fr;

        grid-template-areas: 

        "photo"

        "title"

        "subtitle"

        "profileTextOne"

        "profileQuote"

        "profileTextTwo";

    }



    .profile .profileImg {

        grid-area: photo;

        display: block;

        margin: 20px auto;

        width: 90%;

        box-shadow: 0px 0px 10px #888888;

    }





    .profile .profileTitle {

        grid-area: title;

    }





    .profile .profileSubTitle {

        grid-area: subtitle;

    }



    

    .profile .profileTextOne {

        grid-area: profileTextOne;

    }

   

    .profile .profileQuote {



        grid-area: profileQuote;



        margin-left: 7px;



        margin-right: 7px;



        text-align: center;



    }    



    .profile .profileTextTwo {

        grid-area: profileTextTwo;

    }



    .profileTextTwo ul {

        list-style: square;

    }

  

    .profileTextTwo ul li {

        margin-left: 17px;

    }







/*Ambienti*/

    main .photoImg {

        display: block;

     

        height: 262px;

        width: auto;

        margin: 20px auto;

    }



    main .studio-banner {

        width: 100%;

        height: calc(70vh - 100px);

        background-image: url("../img/Ambienti.jpg");

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

    }



    /*Gallery Test*/

    .photoGallery {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: 1fr 1fr 1fr 1fr;

        min-height: 100vh;

        gap: 20px;

    }



    .imageContainer {

        overflow: hidden;

        height: 500px;

    }



    .imageContainer img{

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: all 0.4s ease-out;

        cursor: pointer;

    }



    .imageContainer img:hover{

        transform: scale(1.1);

    }



    .viewer {

        background-color: rgba(0, 0, 0, 0.8 );

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        opacity: 0;

        pointer-events: none;

        transition: 0.25s ease-out;

    }



    .viewer.open {

        opacity: 1;

        pointer-events: all;

    }



    .viewer .viewedImage {

        position: absolute;

        height: 70%;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%) scale(0.5);

        transition: all 0.25s ease-out;

    }



    .viewer .viewedImage.open {

        transform: translate(-50%, -50%) scale(1);

    }



    .viewer .infoImage {

        color: white;



        font-size: 2rem;

        position: absolute;

        bottom: 5%;

        left: 50%;



        transform: translate(-50%, -50%);

    }



    .studio-boxlink-sq {

        margin: 16px 16px 0;

        width: calc(100% - 32px);

        background-color: whitesmoke;

    }



    .studio-boxlink-sq h3 {

        font-size: 25px;

        font-weight: 300;

        line-height: 40px;

        color: var(--ColorBlack);

        text-align: center;

    }



/*Trattamenti*/



    .igene-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/Igene.jpg");

    }



    .chirurgia-banner{

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/chirurgia.jpg");

    }



    .pedodonzia-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/pedodonzia.jpg");

    }



    .ortodonzia-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/ortodonzia.jpg");

    }



    .conservativa-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/Conservativa.jpg");

    }



    .protesi-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/Protesi.jpg");

    }



    .edodonzia-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/Endodonzia.jpg");

    }



    .parodontologia-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/paradontologia.jpg");

    }



    .implantologia-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/implantologia.jpg");

    }



    .sbiancamento-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/sbiancamento.jpg");

    }







    .faccette-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/faccette.jpg");

    }



    .materiali-banner {

        width: 100%;

        height: calc(39vh - 100px);

        background-repeat: no-repeat;

        background-size: cover;

        background-position: right;

        display: table;

        background-image: url("../img/treatment/materiali.jpg");

    }



/*Contact*/

    /*MAP*/

    .map {

        width: 100%;

        margin-top: 30px;

    }



    main .content .contacts {

        display: grid;

        gap: 10px;

        grid-template-columns: 1fr;

        grid-template-rows: 1fr 1fr 1fr;

        grid-template-areas: 

        "email"

        "phone"

        "address";

    }



    main .content .contacts .email {

        grid-area: email;

        display: grid;

        grid-template-columns: 1fr 1fr 1fr 1fr;

        grid-template-rows: 1fr 1fr 1fr;

        grid-template-areas: 

        "icon . . ."

        "icon text text text"

        "icon . . .";

    }



    main .content .contacts .phone {

        grid-area: phone;

        display: grid;

        grid-template-columns: 1fr 1fr 1fr 1fr;

        grid-template-rows: 1fr 1fr 1fr;

        grid-template-areas: 

        "icon . . ."

        "icon text text text"

        "icon . . .";

    }



    main .content .contacts .address {

        grid-area: address;

        display: grid;

        grid-template-columns: 1fr 1fr 1fr 1fr;

        grid-template-rows: 1fr 1fr 1fr;

        grid-template-areas: 

        "icon . . ."

        "icon text text text"

        "icon . . .";

    }



    main .content .contacts div #text{

        grid-area: text;

        text-align: left;

    }    



    main .content .contacts div #img {

        grid-area: icon;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    main .content .contacts div img {

        border-radius: 50px;

        height: 50px;

        width: 50px;

        margin: auto;

        background-color: rgba(0,0,0,0);

    }

}